<template>
    <div class="tag-input">
        <div class="tag-input-container" :class="isFocus ? 'isfocus' : ''">
            <div class="tag-pre-wrp">
                <div class="label-item-container" v-for="(item, index) in tags" :key="index" @click="removeTag(index)">
                    <p class="label-item-content">{{ item }}</p>
                    <i class="iconfont icon-close"></i>
                </div>
            </div>
            <div class="input-instance">
                <el-input type="text" maxlength="20" placeholder="按回车键Enter创建标签" class="input-val" v-model="input"
                    @focus="isFocus = true;" @blur="isFocus = false;" @keyup.enter="addTag" />
            </div>
            <p class="tag-last-wrp">还可以添加{{ 10 - tags.length }}个标签</p>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref, watch, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';

const isFocus = ref(false);
const input = ref("");
const tags = ref([]);

const props = defineProps({
    sendTag: {
        type: String,
        default: ""
    }
});


const emit = defineEmits(["updateTags", "update:sentTag"]);

const addTag = () => {
    const tag = input.value.trim();
    if (tag.length <= 0 || tags.value.length >= 10) return;
    if (tags.value.findIndex(curr => curr === tag) !== -1) {
        ElMessage.error("标签已存在，不能重复添加");
        return;
    }
    tags.value.push(tag);
    input.value = "";
    emit("updateTags", tags.value);
};

const removeTag = (index) => {
    tags.value.splice(index, 1);
    emit("updateTags", tags.value);
};

watch(() => props.sendTag, (current) => {
    if (current !== "") {
        if (tags.value.findIndex(curr => curr === current) !== -1) {
            emit("update:sentTag", "");
            return;
        }
        tags.value.push(current);
        emit("updateTags", tags.value);
        emit("update:sentTag", "");
    }
});

onMounted(() => {
    // 在组件挂载时执行的逻辑
});

onBeforeUnmount(() => {
    // 在组件卸载前执行的逻辑

});
</script>

<style scoped>
.tag-input-container {
    height: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    transition: border .3s ease;
}

.tag-input-container:hover,
.isfocus {
    border: 1px solid var(--brand_pink);
}

.tag-pre-wrp {
    display: flex;
    flex-wrap: wrap;
}

.label-item-container {
    margin: 4px 6px 4px 0;
    background: var(--brand_pink);
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 9px 0 11px;
    cursor: pointer;
}

.label-item-content {
    line-height: 30px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    font-size: 12px;
}

.icon-close {
    color: #fff;
    font-size: 13px;
    width: 9px;
}

.input-instance {
    flex: 1;
    min-width: 240px;
    margin: 6px 0;
}

.input-val {
    display: block;
    width: 100%;
    color: #222;
    line-height: 22px;
    height: 22px;
    font-size: 14px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background-color: transparent;
}

.input-val :deep() .el-input__wrapper {
    padding: unset;
    box-shadow: none;
    width: 100%;
}

.input-val :deep() .el-input__inner {
    height: unset;
    line-height: unset;
}

.tag-last-wrp {
    font-size: 14px;
    color: #858585;
    margin: 10px 0 10px 12px;
    cursor: default;
}
</style>